import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'
import React, {useState, useEffect} from 'react'

//内部样式
const ss = StyleSheet.create({
  f1: {
    flexDirection: 'row',
    flexWrap: 'wrap',  //允许换行
  },
  item: {
    width: '50%',
    borderBottomWidth: 1,
    borderBottomColor: '#aaa',
    alignItems: 'center',   //子元素在交叉轴上的对齐方式
    paddingVertical: 12
  },
  title: {
    fontSize:16
  },
  num: {
    fontSize: 18,
    fontWeight: 'bold',
    marginVertical: 4
  },
  compare: {
    fontSize: 14,
    opacity: 0.8
  },
  f2: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    paddingVertical: 16,
  },
  menu: {
    width: '50%',
    alignItems: 'center',
    paddingVertical: 12,
  }
})

export default function MainMenu({navigation}) {
  //状态数据 —— 运营统计数据
  let [statistics, setStatistics] = useState([])
  //状态数据 —— 功能管理菜单
  let [menu, setMenu] = useState([])

  //组件挂载时，异步请求服务器端接口数据，获取状态数据
  useEffect(()=>{
    //TODO: 调用服务器端接口，获取状态数据
    setStatistics([
      {title:'上架商品总数', num:'13,156', compare:'截止本月', color:'#0aa1ed'},
      {title:'PC端注册用户', num:'11,187', compare:'较上月增长', color:'#0aeda1'},
      {title:'APP端注册用户', num:'87,411', compare:'较上月增长', color:'#a10aed'},
      {title:'PC端PV量', num:'123,171', compare:'本周数据', color:'#a1ed0a'},
      {title:'APP端PV端', num:'811,136', compare:'本周数据', color:'#ed0aa1'},
      {title:'APP总下载量', num:'8,187', compare:'截止本月', color:'#eda10a'},
    ])
    setMenu([
      {pic:require('../assets/img/menu_product.jpg'), title:'商品管理', target:'plist'},
      {pic:require('../assets/img/menu_user.jpg'), title:'用户管理', target:'ulist'},
      {pic:require('../assets/img/menu_order.jpg'), title:'订单管理', target:'olist'},
      {pic:require('../assets/img/menu_refresh.jpg'), title:'首页管理', target:'idxManagement'},
    ])
  },[])

  return (
    <View>
      {/* F1: 运营统计信息 */}
      <View style={ss.f1}>
        {
          statistics.map( (s, i)=>(
          <View key={i} style={[ss.item, {borderRightColor:'#aaa', borderRightWidth:i%2===0?1:0}]}>
            <Text style={ss.title}>{s.title}</Text>
            <Text style={[ss.num, {color: s.color}]}>{s.num}</Text>
            <Text style={ss.compare}>{s.compare}</Text>
          </View>
          ) )
        }
      </View>


      {/* F2: 功能管理菜单 */}
      <View style={ss.f2}>
        {
          menu.map( (m, i)=>(
            <TouchableOpacity style={ss.menu} key={i} activeOpacity={0.6} onPress={()=>navigation.navigate(m.target)}>
              <Image source={m.pic}/>
              <Text>{m.title}</Text>
            </TouchableOpacity>
          ) )
        }
      </View>



      <Text onPress={()=>navigation.goBack()}>退出登录</Text>
    </View>
  )
}